<template>
  <div id="app">
    <!-- 头部 -->
    <div class="header">
      <h1>主页</h1>
      <div class="user-avatar">
        <img src="https://touxiangsc.oss-cn-beijing.aliyuncs.com/avatars/1739240924933-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240927195346.jpg" alt="用户头像">
      </div>
    </div>
    <!-- 横幅 -->
    <div class="banner">
      <img src="https://ts4.cn.mm.bing.net/th?id=OIP-C.XWg8Xt1dRJ1-jTNuLzEPIQHaE8&w=306&h=204&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.1&pid=3.1&rm=2" alt="金门大桥">
      <p>你下一次想去哪？</p>
    </div>
    <!-- 搜索部分 -->
    <div class="search-section">
        <el-input placeholder="伦敦, 开普敦" v-model="searchInput" class="search-input"
                  @focus="handleClick"></el-input>

      <div class="selection-container">
        <!-- 日期选择 -->
        <div class="date-selection">
          <el-date-picker
              v-model="selectedDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              class="optimized-date-picker"
              @change="handleDateChange">
            <template slot="default">
              <div class="date-range-display">
                {{ formattedSelectedDate }}
              </div>
            </template>
          </el-date-picker>
        </div>

        <!-- 房间选择触发按钮 -->
        <div class="room-selection-trigger" @click="showRoomDialog = true">
          <span>{{ roomNumber }} 房间 · {{ adultNumber }} 成人 · {{ minorNumber }} 儿童</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>

      <el-button type="success" class="search-button" @click="sousuo()">搜索酒店</el-button>
    </div>

    <!-- 弹出对话框优化 -->
    <el-dialog
        title="选择人数和房间数"
        :visible.sync="showRoomDialog"
        width="90%"
        class="room-dialog">
      <div class="dialog-content">
        <!-- 房间数 -->
        <div class="number-selector">
          <div class="selector-label">房间数</div>
          <div class="selector-controls">
            <el-button
                round
                :disabled="roomNumber <= 1"
                @click="decreaseRoomNumber">-</el-button>
            <span class="number-display">{{ roomNumber }}</span>
            <el-button round @click="increaseRoomNumber">+</el-button>
          </div>
        </div>

        <!-- 成人 -->
        <div class="number-selector">
          <div class="selector-label">成人</div>
          <div class="selector-controls">
            <el-button
                round
                :disabled="adultNumber <= 0"
                @click="decreaseAdultNumber">-</el-button>
            <span class="number-display">{{ adultNumber }}</span>
            <el-button round @click="increaseAdultNumber">+</el-button>
          </div>
        </div>

        <!-- 儿童 -->
        <div class="number-selector">
          <div class="selector-label">儿童（0-17岁）</div>
          <div class="selector-controls">
            <el-button
                round
                :disabled="minorNumber <= 0"
                @click="decreaseMinorNumber">-</el-button>
            <span class="number-display">{{ minorNumber }}</span>
            <el-button round @click="increaseMinorNumber">+</el-button>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmSelection">确认选择</el-button>
      </div>
    </el-dialog>
    <!-- 最近搜索 -->
    <div class="recent-searches">
      <h2>最近搜索</h2>
      <el-carousel :interval="4000" arrow="always">
        <el-carousel-item v-for="(item, index) in recentSearches" :key="index">
          <div class="search-item">
            <img :src="item.img" alt="搜索项">
            <div class="search-item-info">
              <p>{{ item.name }}</p>
              <span>{{ item.date }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 最受欢迎旅游圣地 -->
    <div class="popular-destinations">
      <h2>最受欢迎的旅游圣地</h2>
      <el-carousel :interval="4000" arrow="always">
        <el-carousel-item v-for="(dest, index) in popularDestinations" :key="index">
          <div class="destination-item">
            <img :src="dest.img" alt="旅游圣地">
            <p>{{ dest.name }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 最实惠价格 -->
    <div class="best-prices">
      <h2>最实惠的价格</h2>
      <div
          class="hotel-item"
          v-for="(hotel, index) in RoomData"
          :key="index"
          @click="RoomList(hotel)"
      >
        <img :src="hotel.buildingUrl" alt="酒店" />
        <div class="hotel-info">
          <p>{{ hotel.tname }}</p>
          <span>{{ hotel.address }}</span><br>
          <span>{{ hotel.nightlyRate }} /每晚</span><br>
          <span>评分{{ hotel.score }}</span>
        </div>
      </div>
    </div>
    <!--    底部导航-->
    <div class="bottom-navigation">
      <button @click="discover"><i class="el-icon-search"></i><br/>发现</button>
      <button @click="travel"><i class="el-icon-star-off"></i><br/>旅行</button>
      <button @click="myProfile"><i class="el-icon-user"></i><br/>我的</button>
    </div>
  </div>
</template>
<script>
import { format, isBefore, isSameDay } from 'date-fns';

export default {
  data() {
    return {
      searchInput: '',
      selectedDate: [new Date(), new Date()], // 设置初始日期为当前日期
      user:{},
      pickerOptions: {
        shortcuts: true,
        format: 'yyyy-MM-dd',
        disabledDate: (date) => {
          return isBefore(date, new Date()); // 禁止选择过去的日期
        },
        onPick: (picker) => {
          const startDate = picker.startDate;
          const endDate = picker.endDate;
          if (startDate && endDate && isBefore(startDate, endDate)) {
            return;
          }
          if (startDate && endDate && isSameDay(startDate, endDate)) {
            return;
          }
          if (startDate && endDate && isBefore(endDate, startDate)) {
            picker.endDate = null;
          }
        }
      },
      recentSearches: [
        { img: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/02/00/Cg-4WVVxDyCIKnU-AAQxnMGr9K0AAEryAA_QZEABDG0238.jpg', name: '伦敦London', date: '02-25-21' },
        { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.9Kw-HtIOCE48e2c2zrXLpAHaEo?rs=1&pid=ImgDetMain', name: '巴黎Paris', date: '04-07-21' },
        { img: 'https://img1.qunarzz.com/travel/poi/1505/e4/18fdf20f5edf1e.jpg', name: '东京Tokyo', date: '06-15-21' }
      ],
      popularDestinations: [
        { img: 'https://img1.pconline.com.cn/piclib/200906/15/batch/1/35358/12450297668892ql6x9sgvx.jpg', name: '夏威夷Hawaii' },
        { img: 'https://pic.52112.com/180130/180130_175/nQSX7U8NoD.jpg', name: '威尼斯Venice' }
      ],
      RoomData: [],
      showRoomDialog: false, // 控制对话框显示
      roomNumber: 1, // 房间数初始值
      adultNumber: 2, // 成年人数量初始值
      minorNumber: 0 // 未成年人数量初始值
    };
  },
  created() {
    this.findAll();
    //刷新界面
    if(sessionStorage.getItem('aaa')==null){
      this.$router.go(0);
      sessionStorage.setItem("aaa",1)
    }
  },
  computed: {
    formattedSelectedDate() {
      if (this.selectedDate && this.selectedDate.length === 2) {
        return `${format(this.selectedDate[0], 'MM.dd日')} - ${format(this.selectedDate[1], 'MM.dd日')}`;
      }
      return '请选择日期';
    }
  },
  methods: {
    findAll(){
      this.axios.get('http://localhost:6001/api/tavern/findAll').then(res => {
        this.RoomData = res.data
      })
    },
    handleDateChange(val) {
      console.log('原始的 val:', val);
      this.selectedDate = val;
      console.log('转换后的 selectedDate:', this.selectedDate);
    },
    decreaseRoomNumber() {
      if (this.roomNumber > 1) {
        this.roomNumber--;
      }
    },
    increaseRoomNumber() {
      this.roomNumber++;
    },
    decreaseAdultNumber() {
      if (this.adultNumber > 0) {
        this.adultNumber--;
      }
    },
    increaseAdultNumber() {
      this.adultNumber++;
    },
    decreaseMinorNumber() {
      if (this.minorNumber > 0) {
        this.minorNumber--;
      }
    },
    increaseMinorNumber() {
      this.minorNumber++;
    },
    confirmSelection() {
      // 这里可以添加确认选择后的逻辑，比如将选择的数据传递给搜索逻辑等
      console.log('选择的房间数:', this.roomNumber);
      console.log('选择的成年人数量:', this.adultNumber);
      console.log('选择的未成年人数量:', this.minorNumber);
      this.showRoomDialog = false;
    },
      handleClick() {
          // 使用 Vue Router 进行页面跳转
          this.$router.push('/Search');
      },
    sousuo() {
      this.$router.push('/Search');
      console.log('跳转搜索页面');
    },
    discover() {
      if (this.$route.path !== '/homePage') {
        this.$router.push(`/homePage`);
      }

    },
    travel() {
      this.$router.push('/travel');
    },

    myProfile() {
      sessionStorage.removeItem('aaa')
      this.$router.push('/Wo');

    },
    RoomList(hotel) {
      const tid = hotel.tid;
      const hotelName = hotel.tname;
      this.$router.push({ path: "/HotelRoomList", query: { name: hotelName, tid: tid } });
      console.log("跳转房间列表页面传递的酒店名称:", hotelName);
      console.log("跳转房间列表页面传递的酒店id", tid);
    },

  }
};
</script>
<style scoped>
/* 搜索容器布局优化 */
.selection-container {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

/* 日期选择器优化 */
.optimized-date-picker {
  width: 100%;

  .el-range-input {
    font-size: 14px;
  }

  .date-range-display {
    padding: 8px 12px;
    color: #666;
  }
}

/* 房间选择触发按钮 */
.room-selection-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 40px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  background: white;
  cursor: pointer;

  span {
    color: #606266;
    font-size: 14px;
  }

  &:hover {
    border-color: #C0C4CC;
  }
}

/* 对话框优化 */
.room-dialog {
  .dialog-content {
    padding: 15px 20px;
  }

  .number-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }
  }

  .selector-label {
    font-size: 16px;
    color: #333;
  }

  .selector-controls {
    display: flex;
    align-items: center;
    gap: 15px;

    .el-button {
      width: 36px;
      height: 36px;
      padding: 0;
      font-size: 18px;
    }

    .number-display {
      min-width: 30px;
      text-align: center;
      font-weight: 500;
    }
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .selection-container {
    flex-direction: column;
  }

  .search-button {
    width: 100%;
  }
}
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* 头部样式 */
.header {
  background-color: #f4f4f4;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  font-size: 20px;
}

.time {
  font-size: 14px;
}

.user-avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover; /* 确保头像不变形 */
}

/* 横幅样式 */
.banner {
  position: relative;
}

.banner img {
  width: 100%;
  height: 200px; /* 设置横幅图片高度 */
  object-fit: cover; /* 保持图片比例并覆盖容器 */
}

.banner p {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 18px;
}

/* 搜索部分样式 */
.search-section {
  padding: 10px;
}

.search-section .el-input {
  width: 100%;
  margin-bottom: 10px;
}

.date-picker {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.date-range,
.travelers {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 最近搜索样式 */
.recent-searches {
  padding: 10px;
}

.recent-searches h2 {
  margin-bottom: 10px;
}

.search-item {
  display: flex;
  margin-bottom: 10px;
}

.search-item img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  object-fit: cover; /* 保持图片比例并覆盖容器 */
}

/* 最受欢迎旅游圣地样式 */
.popular-destinations {
  padding: 10px;
}

.popular-destinations h2 {
  margin-bottom: 10px;
}

.destination-item {
  margin-bottom: 10px;
}

.destination-item img {
  width: 100%;
  height: 258px; /* 设置旅游圣地图片高度 */
  object-fit: cover; /* 保持图片比例并覆盖容器 */
}

/* 最实惠价格样式 */
.best-prices {
  margin-bottom: 50px;
  padding: 10px;
}

.best-prices h2 {
  margin-bottom: 10px;
}

.hotel-item {
  display: flex;
  margin-bottom: 10px;
}

.hotel-item img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  object-fit: cover; /* 保持图片比例并覆盖容器 */
}

.stars .el-icon {
  color: gold;
}
/* 优化后的底部导航样式 */
.bottom-navigation {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  /* 使用线性渐变设置背景，从透明度高的白色到透明度低的白色 */
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.8));
  padding: 10px 0;
  box-shadow: none; /* 移除阴影 */
    z-index: 1000; /* 确保它在其他内容之上 */
}

.bottom-navigation button {
  flex: 1;
  margin: 0 10px;
  background-color: transparent; /* 按钮背景透明 */
  border: none; /* 移除按钮边框 */
  color: #333; /* 按钮文本颜色设置为深灰色，以在白色背景上有较好的可读性 */
  outline: none; /* 移除聚焦时的轮廓 */
  font-size: 16px; /* 设置按钮文本字体大小 */
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.bottom-navigation button:hover {
  color: #007BFF; /* 鼠标悬停时按钮文本颜色变为蓝色 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
}

.bottom-navigation button:active {
  color: #FF6347; /* 按钮被点击时文本颜色变为橙红色 */
}
/* 轮播图样式 */
.el-carousel__item {
  height: auto;
}
.room-number-section,
.adult-number-section,
.minor-number-section {
  margin-bottom: 20px;
}
.room-number-label,
.adult-number-label,
.minor-number-label {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
}
.room-number-controls span,
.adult-number-controls span,
.minor-number-controls span {
  font-size: 18px;
}
.room-number-controls el-button,
.adult-number-controls el-button,
.minor-number-controls el-button {
  width: 40px;
  height: 40px;
  text-align: center;
}
</style>
